<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        div {
            width: 800px;
            height:250px;
            margin: 10px;
        }
        /* 线性渐变：从上到下，中间增加颜色的渐变 */
        .box1 {
            /* 基于Webkit内核的实现 */
            background:-webkit-gradient(linear,left top,left bottom, from(#f90),to(#0f0));
            /* 基于Gecko内核的实现 */
            background:-moz-linear-gradient(left,#f90,#0f0);
        }
        /* 线性渐变：从左到右，中间增加颜色的渐变 */
        .box2 {
            /* 基于Webkit内核的实现 */
            background: -webkit-gradient(linear,left top,left bottom, from(#f90), to(#0f0),color-stop(50%,rgb(102, 102, 223)));
            /* 基于Gecko内核的实现 */
            background:-moz-linear-gradient(left,#f90,rgb(102, 102, 223),#0f0);
        }
        /* CSS径向渐变 */
        .box3 {
            /* 基于Webkit内核的实现 */
            background: -webkit-gradient(radial,200 100,10,200 100, 100, from(#f90),to(#000),color-stop(50%,red));
            /* 基于Gecko内核的实现 */
            background:-moz-radial-gradient(200px 100px,circle,#f90 10px,red,#000 100px);
        }
        

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>